<template>
  <div class="layout-padding-auto ">
      <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

        <div class="block">
          <el-form-item>
            <el-button type="primary" icon="plus" @click="onOpenAddMenu">{{ $t('message.add')
            }}</el-button>
            <el-button type="success" icon="upload" @click="importFormDialogRef.openAddDialog()">
              {{ $t('common.importBtn') }}</el-button>
          </el-form-item>

          <el-form-item :label="$t('message.userNo')">
            <el-input v-model="state.queryForm.workNumber" clearable :placeholder="$t('message.userNo')" />
          </el-form-item>
          <el-form-item :label="$t('message.userName')">
            <el-input v-model="state.queryForm.name" clearable :placeholder="$t('message.userName')" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="search" @click="query"> {{ $t('so.query') }}</el-button>
            <el-button icon="refresh" @click="resetQuery">{{ $t('so.reset') }}</el-button>
          </el-form-item>
        </div>


      </el-form>

      <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
        style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
        :header-cell-style="tableStyle.headerCellStyle">

        <el-table-column type="index" label="#" width="80" />
        <el-table-column prop="workNumber" :label="$t('message.userNo')" />
        <el-table-column prop="name" :label="$t('message.userName')" />
        <el-table-column prop="department" :label="$t('productlineUser.deptartment')" />
        <el-table-column prop="sex" :label="$t('productlineUser.sex')" />
        <el-table-column prop="tel" :label="$t('productlineUser.tel')" />
        <el-table-column prop="isOutStr" :label="$t('productlineUser.isOut')" />
        <el-table-column :label="$t('common.action')" show-overflow-tooltip width="250">
          <template #default="scope">
            <span style="margin-left: 12px">
              <el-button type="danger" icon="delete" @click="handleDelete(scope.row)">
              </el-button>
            </span>
          </template>
        </el-table-column>

      </el-table>

      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    <MenuDialog @refresh="getDataList" ref="menuDialogRef" />
    <importForm ref="importFormDialogRef" @getChildren="oncFun" />
  </div>
</template>


<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { GetAllUsersPaged, DeleteUser } from '/@/api/platform/mes/productlineUser';
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useMessage, useMessageBox } from "/@/hooks/message";
// 引入组件
const MenuDialog = defineAsyncComponent(() => import('./form.vue'));
const importForm = defineAsyncComponent(() => import('./importForm.vue'));
const { t } = useI18n();
const importFormDialogRef = ref()
// 搜索变量
const tableRef = ref();

// 搜索变量
const queryRef = ref();
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
  },
  pageList: GetAllUsersPaged,
});

const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
  getDataList(false);
};

const query = () => {
  getDataList();
};
// 删除操作
const handleDelete = async (row: any) => {
  try {
    await useMessageBox().confirm(t('common.delConfirmText'));
  } catch {
    return;
  }

  try {
    await DeleteUser({ id: row.id });
    getDataList();
    useMessage().success(t('common.delSuccessText'));
  } catch (err: any) {
    useMessage().error(err.msg);
  }
};
const menuDialogRef = ref();
// 打开新增菜单弹窗
const onOpenAddMenu = () => {
  menuDialogRef.value.openDialog();
};
const oncFun = (x: any) => {
  getDataList()
}
</script>